<template>
  <el-card style="width: 500px;">
    <el-form label-width="120px" size="small" :model="form" :rules="rules" ref="pass">
      <el-form-item label="请输入原密码" prop="passwords">
        <el-input type="password" placeholder="密码" v-model="form.passwords"/>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="form.newPassword" autocomplete="off" show-password></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input v-model="form.confirmPassword" autocomplete="off" show-password></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="savePassword">确定</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import cookie from "js-cookie";
import orders from "../api/orders";

export default {
  layout: 'menu',
  data() {
    var oldPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        orders.checkOldPassword(value, this.form.mobile).then(resp => {
          if (resp.code === 30000) {
            callback(new Error(resp.message));
          } else if (resp.code === 20000) {
            this.$message.success('旧密码正确');
          }
        });
        callback();
      }
    };
    return {
      form: {},
      mobile: '',
      loginInfo: {},
      rules: {
        passwords: [
          {required: true, message: '请输入原密码', trigger: 'blur'},
          {min: 6, max: 12, message: '长度在6至12个字符', trigger: 'blur'},
          {validator: oldPassword, trigger: 'blur'}
        ],
        newPassword: [
          {required: true, message: '请输入新的密码', trigger: 'blur'},
          {min: 6, max: 12, message: '长度在6至12个字符', trigger: 'blur'}
        ],
        confirmPassword: [
          {required: true, message: '请输入确认密码密码', trigger: 'blur'},
          {min: 6, max: 12, message: '长度在6至12个字符', trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.getSelects()
  },
  methods: {


    getSelects() {
      var userStr = cookie.get("front_member")
      if (userStr) {
        this.loginInfo = JSON.parse(userStr)
        console.log(this.loginInfo)
        this.form = this.loginInfo
        this.mobile = this.loginInfo.mobile
      }
    },
    savePassword() {
      this.$refs.pass.validate((valid)=>{
        if (valid){
          if (this.form.newPassword!==this.form.confirmPassword){
            this.$message.error("俩次输入的密码不相同！")
            return false
          }
          // alert(this.form.passwords)
          // alert(this.form.password)

         orders.password(this.form,this.mobile).then(res=>{
           this.$message.success("修改成功！")
           this.$router.push({path:'/login'})
         })
        }
      })
      console.log(this.form.passwords)
    }
  }
}
</script>
<style>
.input-reader-name {
  left: -280px;
  width: 30%;
}

.button {
  position: relative; /*或relative*/
  top: 20px;
  left: -30%;
  transform: translateX(-50%);
}

</style>
